<script>
import { Shop,
ShoppingBag,
FirstAidKit,HomeFilled, UserFilled, User, Avatar,PictureFilled,CirclePlus,HelpFilled } from '@element-plus/icons-vue'
import { routes} from '@/router/index'

import { mapState} from 'vuex'

export default {
    data() {
        return {
          routers: routes[0].children,
            path: '', // 该 path 是用来监听当前页面路由的路径用的
        }
  },
  computed: {
    ...mapState(['userInfo']),
    menus() {
        return this.userInfo.adminname == 'admin' ? routes[0].children : this.userInfo.checkedkeys
      }
    },
    props: {
        collapse: Boolean
    },
    components: {
        HomeFilled,
        UserFilled,
        User,
        Avatar,
        PictureFilled,
        CirclePlus,
        HelpFilled,
        Shop,
        ShoppingBag,
        FirstAidKit
  },
  mounted() {
      /*
        this.$router: 是路由的跳转对象，专门用来做页面跳转控制用的
        this.$route: 是用来查看路由信息用的，包含了路由的配置信息和当前路由信息等
      */ 
      // this.$router.push()
      // console.log('路由信息：',this.$route);
      console.log(this.userInfo.checkedkeys);
  },
  watch: {
    $route: {
      // 配置非惰性，立即执行一次
      immediate: true,
      handler(newRoute) {
        // console.log(newRoute.path);
          this.path = newRoute.path
        }
      }
  }
}

</script>
<template>
    <el-menu 
          unique-opened
          :default-active="path"
          :collapse="collapse"
          :router="true"
        >
          <el-menu-item index="home">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
          </el-menu-item>

          <el-sub-menu v-for="item in menus" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span> {{ item.label }} </span>
          </template>

            <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">
              <el-icon>
                <!-- <User /> -->
                <component :is="child.icon"></component>
              </el-icon>
              {{ child.label }}
            </el-menu-item>
            <!-- <el-menu-item index="/manager/userList">
              <el-icon><Avatar /></el-icon>
              用户列表
            </el-menu-item> -->

        </el-sub-menu>

        

      </el-menu>
</template>
<style></style>import { mapState } from 'vuex'import { computed } from 'vue'

